import React from 'react'
import {Outlet, useNavigate,useLocation} from "react-router-dom"
export default function Home() {

  /* 
    使用NavLink或者Link进行跳转,被称作为声明式路由导航
    使用navigate方法进行路由跳转,被称作为编程式路由导航
  */


  /*
    useNavigate 是个hooks函数,调用后返回一个函数,是navigate方法,调用返回的这个函数,可以进行路由跳转
  */


  const navigate=useNavigate()
  
  /* 
      navigate方法:
        -参数一:是to到指定的地址  
        -参数二:配置对象,可以写一个state属性,就是state传参
  */

  // 跳转路径需要从一级路由开始写
  const toNewsHandle=()=>{
    navigate("/main/home/news/001?a=睡觉吗&&b=起来吧",{
      state:[
        { id: "001", name: "最伟大的作品" },
        { id: "002", name: "夜曲" },
        { id: "003", name: "爷爷泡的茶" },
        { id: "004", name: "求佛" },
        { id: "005", name: "白狐" }
      ]
    })
  }

  const toMusicHandle=()=>{
    navigate("/main/home/music/001/?a=睡觉吗&&b=起来吧",{
    
      state:[
        { id: "001", name: "空间站国旗与地球同框" },
        { id: "002", name: "罗永浩谈钟薛高卖得贵" },
        { id: "003", name: "麦当劳员工将掉地上面包放回货架" },
      ]

    
    })
  }

  return (
    <div >
    <h3>我是Home的内容</h3>
    <button onClick={toNewsHandle}>News</button>
    <button onClick={toMusicHandle}>Music</button>
   <Outlet/>
  </div>
  )
}
